import React from "react";
import ReactDom from "react-dom";
import ListPanel from "./ListPanel";
const uuid = require('uuid').v1;

class LRApp extends React.Component{
  constructor(props){
    super(props);
    this.state={
      leftList : this.props.list,
      rightList:[]
    }
  }


  move2Right(){
    let list1 = this.state.leftList;
    let list2 = this.state.rightList;
    let temp=[];
    for(let i=0;i<list1.length;i++){
      if(list1[i].selected){
        let item = list1[i];
        // console.dir(item);
        item.selected = !item.selected;
        list2.push(item);
        // list1.splice(i,1);
      }else{
        temp.push(list1[i]);
      }
    }
    list1=temp;
    // console.dir(list1);
    // for(let i=0;i<list1.length;i++){
    //   if(list1[i].selected==false){
    //     list1.splice(i,1);
    //   }
    // }
    console.dir(list1);
    console.dir(list2);
    this.setState({leftList:list1,rightList:list2});

  }

  move2Left(){
    let list1 = this.state.leftList;
    let list2 = this.state.rightList;
    let temp=[];
    for(let i=0;i<list2.length;i++){
      if(list2[i].selected==true){
        let item = list2[i];
        item.selected = !item.selected;
        list1.push(item);
        // list2.splice(i,1);
      }else{
        // temp=[];
        temp.push(list2[i]);
      }
    }
    list2 = temp;
    // for(let i=0;i<list2.length;i++){
    //   if(list2[i].selected==false){
    //     list2.splice(i,1);
    //   }
    // }
    console.dir(list1);
    console.dir(list2);
    this.setState({leftList:list1,rightList:list2});
  }


  render(){
    return   <div style={{display:"flex"}}>
      <ListPanel list={this.state.leftList} />
          <div>
            <button onClick={()=>this.move2Left()} style={{display:"block"}}>&lt;=</button>
            <button onClick={()=>this.move2Right()} style={{display:"block"}}>=&gt;</button>
          </div>
      <ListPanel list={this.state.rightList} />
      </div>
  }
}
const list = [
  {content:"aaaaaaa",id:uuid()},
  {content:"bbbbbbb",id:uuid()},
  {content:"ccccccc",id:uuid()},
  {content:"ddddddd",id:uuid()},
  {content:"eeeeeee",id:uuid()}
];





ReactDom.render(
  <LRApp list={list}/>
  ,document.body);
